import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text, Swiper, SwiperItem } from '@tarojs/components'
import './index.less'
import Tab from '../../components/tab-bar'
import Topic from '../../components/page-topic'

interface IState {
  labels: string[]
  current: number
  tabIndex: number
  hasInitTopic: boolean
  hasInitFollow: boolean
  loading: boolean
}
export default class Index extends Component<{}, IState> {
  state: IState = {
    labels: ['话题', '推荐', '关注'],
    current: 1,
    tabIndex: 1,
    hasInitTopic: false,
    hasInitFollow: false,
    loading: false
  }
  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}
  topic: any = Taro.createRef()
  componentDidShow() {}

  componentDidHide() {}

  onTabChange = async (index) => {
    if (index === 0) {
      // console.log('1......')
      // if (!this.hasInitTopic) {
      await this.topic.current.init()
      // this.hasInitTopic = true
      // }
      this.topic.current.loadTrack()
    }
    this.setState({
      current: index,
      tabIndex: index
    })
  }
  onChange = async (res) => {
    const { current, source } = res.detail
    if (current === 0) {
      console.log('1...')
      // if (!this.hasInitTopic) {
      await this.topic.current.init()
      // this.hasInitTopic = true
      // }
      this.topic.current.loadTrack()
    }
    if (source === 'touch') {
      this.setState({
        tabIndex: current,
        current: current
      })
    }
  }
  goSend = (e) => {
    e.stopPropagation()
    Taro.navigateTo({
      url: '/pages/post-type'
    })
  }
  goPlane = (e) => {
    e.stopPropagation()
    Taro.navigateTo({
      url: '/pages/paper-plane'
    })
  }
  goMoney = (e) => {
    e.stopPropagation()
    const { isBinding } = Taro.getStorageSync('user')
    if (isBinding === 0) {
      Taro.navigateTo({
        url: '/pages/gender'
      })
    } else {
      Taro.navigateTo({
        url: '/pages/lachine'
      })
    }
  }

  config: Config = {
    navigationBarTitleText: '社区',
    navigationStyle: 'custom',
    usingComponents: {
      'navigation-bar': '../../components/navigation-bar/navigation-bar'
    }
  }

  render() {
    const { loading, labels, tabIndex, current } = this.state
    return (
      <View className="container">
        <navigation-bar back={false} loading={loading} background="#ffffff">
          <View slot="left">
            <Tab extClass={"'tabs'"} labels={labels} selectedIndex={tabIndex} onTabChange={this.onTabChange} />
          </View>
        </navigation-bar>
        <Swiper current={current} onChange={this.onChange} style={{ height: 'calc(100vh - 64px)' }}>
          <SwiperItem>
            <Topic ref={this.topic} />
          </SwiperItem>
          <SwiperItem>
            <Text>recommend</Text>
            {/* <recommend /> */}
          </SwiperItem>
          <SwiperItem>
            <Text>follow</Text>
            {/* <follow ref="follow" /> */}
          </SwiperItem>
        </Swiper>
        <View className="home-action" style={{ right: `${20}rpx` }}>
          <View className="btn-circle btn-i" onClick={this.goSend}>
            <View className="icon icon-xiezuo"></View>
          </View>
          <View className="btn-card btn-i" onClick={this.goPlane}>
            <View className="icon icon-plane"></View>
          </View>
          <View className="btn-share btn-i" onClick={this.goMoney}>
            <View className="icon icon-hongbao"></View>
            <View className="dot">认证领¥50</View>
          </View>
        </View>
      </View>
    )
  }
}
